<template>
  <div>
    <top></top>
    <div class="main-content loan">
      <div class="mc-left_title">
        <span>支用</span>
      </div>
      <div class="loan-base">
        <div class="lb-item">
          <div class="li-span">
            <span class="hi-left">{{ (loanForm.interestRate/12).toFixed(2) }}</span><span class="hi-left">‰</span><br>
            <span class="hi-bottom" style="width: 126px;">贷款利率（月化）</span>
          </div>
        </div>
        <div class="lb-item">
          <div class="li-span">
            <span class="hi-left hi-right">{{ loanForm.deadLine }}</span>
            <br>
            <span class="hi-bottom" style="width: 100px;">最终还款日</span>
          </div>
        </div>
        <div class="lb-item">
          <div class="li-span">
            <span class="hi-left hi-right">{{ loanForm.repayMethod }}</span>
            <br>
            <span class="hi-bottom" style="width: 100px;">利息结算日</span>
          </div>
        </div>
      </div>
      <el-form :inline="true" :model="loanForm" class="loan-form" ref="loanForm">
        <div class="tsd-base">
          <!--          <span class="tb-tips">温馨提示：支用前请插入您的U盾！</span>-->
          <div class="loan-form_content">
            <el-form-item prop="account">
              <span style="position: relative; left: 20px; z-index: 10;" class="svg-container svg-money"><icon-svg icon-class="renminbi"></icon-svg></span>
              <el-input disabled class="ai-input ai-input_capital" @change="changeAmount"
                        v-model="loanForm.useAmount">
              </el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="loan-top">
      </div>
      <div class="tsd-bottom loan-bottom">
        <div class="lb-loan_item" style="">
          <p style="margin-bottom: 6px;font-weight: bold;">
            <span style="font-size: 14px;padding-right: 70px">{{loanForm.useAmount}}</span>
            <span>-/-</span>
          </p>
          <p style="margin-top: 6px;">
            <span style="padding-right: 70px">支用金额</span>
            <span style="position: absolute;">利息/日(具体以实际为准)</span>
          </p>
        </div>
      </div>
      <div class="tsd-bottom">
        <el-button type="warning" class="fir-btn sec-btn confirm-btn search-btn" @click="handleSubmit">立即申请</el-button>
        <!--        <a class="link">点击下载控件</a>-->
      </div>
    </div>
  </div>
</template>

<script>
import Top from '@/components/layout/top';
import {drawdown} from '@/api/plat/plat';
import {mapState} from "vuex";

export default {
  data() {
    return {
      visible: false,
      loanForm: {
        applyno: '',// 授信申请编号
        balance: '',// 在贷金额
        fundCode: '',//资方编码
        fundName: '',//资方名称
        interestRate: '',//年化利率
        logo: '',//资方logo
        productCode: '',//产品编码
        productName: '',//产品名称
        quota: '',//授信额度
        deadLine: '',//贷款期限
        quotaId: '',//额度Id
        repayMethod: '',//还款方式
        status: '',//授信状态
        statusName: '',//授信状态名称
        useAmount: '',//可支用额度
        isOverdue: ''//授信是否过期
      },
      userInfo: {
        uscCode: ""
      }
    };
  },
  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  components: {
    Top
  },
  mounted() {
    this.userInfo = !!this.user.user ? this.user.user : {uscCode: ""};
    this.loanForm = JSON.parse(JSON.stringify(this.$route.query));
    this.loanForm.useAmount = this.numberThousand(this.loanForm.useAmount);
  },
  methods: {
    /***
     * 金额千分化
     * @param num
     */
    numberThousand(num) {
      if (parseFloat(num) > 10000) {//千位以后置零
        return this.decodeMoney(num);
      } else {
        return '10,000'.toString();
      }
    },
    changeAmount(val){
      let temp = this.vMoney.undecode(val)
      this.loanForm.useAmount = this.numberThousand(temp);
    },
    decodeMoney(num) {
      num = !!num ? num : '';
      let result = num.toString().replace(/\d+/,  (n)=> {
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
      return result.replace(/[^\d,]/g, "");
    },
    handleIconClick() {
      this.visible = true;
    },
    handleSubmit() {
      let _this = this;
      //输入的支用金额
      let _amount = _this.vMoney.undecode(_this.loanForm.useAmount);
      let params = {
        "amount": _amount,
        "fundCode": _this.loanForm.fundCode,
        "purpose": "",
        "quotaId": _this.loanForm.quotaId,
        "uscCode": _this.userInfo.uscCode
      };
      if(_amount > _this.$route.query.useAmount){
        _this.$message({
          duration: 3000,
          type: 'error',
          message: '支用金额不能大于'+_this.numberThousand(_this.$route.query.useAmount)
        });
      }else{
        drawdown(params).then(response => {
          if (response.code === 200) {
            _this.$message({
              duration: 3000,
              type: 'success',
              message: '支用成功',
              onClose: () => {
                _this.$router.push({
                  name: 'plat',
                  query: {
                    code: _this.loanForm.fundCode
                  }
                });
              }
            });
          }
        });
      }

    }

  }
}
</script>

<style lang="scss">
.loan {
  min-height: calc(100vh - 108px);

  .tb-tips {
    color: #FFA01D;
  }

  .tsd-bottom {
    margin-top: 40px;
    /*.sec-btn {
      margin-left: 108px;
    }*/
    .search-btn {
      background: #FF8C59;
    }

    a.link {
      font-size: 14px;
    }
  }
  .loan-bottom{
    margin-top: 0;
    font-size: 12px;
    height: 60px;
    .lb-loan_item{
      width:200px;
      height: 60px;
      text-align: left;
      margin: 0 auto;
    }
  }

  .loan-form {
    input {
      border-right: 0;
      border-left: 0;
      border-top: 0;
      border-radius: 0;
    }

    .el-input__inner:focus {
      border-color: #dcdfe6;
    }

    .el-input-group__append {
      border-right: 0;
      border-left: 0;
      border-top: 0;
      border-radius: 0;
      background-color: white;
    }

    .el-input-group__append button.el-button {
      padding: 12px 4px;
    }
    .el-form-item{
      margin-right: 18px;
    }
  }

  .loan-form_content {
    margin-top: 60px;

    .ai-input {
      width: 200px;

      input {
        font-size: 30px;
      }
    }

    .el-input__icon {
      line-height: normal;
      color: #FFA01D;
    }
  }

  .loan-top {
    width: 50%;
    padding: 0 40px;
    height: 95px;
    margin: 0 auto;

    .lt-item {
      width: 50%;
      float: left;

      .ht-title {
        border: 1px solid #FFA01D;
        color: #FFA01D;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 14px;
        margin-left: 16px;
      }

      .li-span {
        margin-top: 18px;
        text-align: center;

        .hi-left {
          color: #FFA01D;
          font-size: 14px;
          font-weight: bolder;
        }

        .hi-right {
          color: #FFA01D;
          font-size: 14px;
        }

        .hi-bottom {
          font-size: 12px;
          padding-top: 8px;
          color: #6C6C6C;
          display: block;
        }
      }

      .ht-last {
        margin-left: 40px;
      }
    }
  }

  .loan-base {
    width: 100%;
    padding: 0 40px;
    height: 95px;
    margin: 12px auto 0 auto;

    .lb-item {
      width: 33%;
      float: left;

      .ht-title {
        border: 1px solid #FFA01D;
        color: #FFA01D;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 14px;
        margin-left: 16px;
      }

      .li-span {
        margin-top: 18px;
        text-align: center;

        .hi-left {
          color: #FFA01D;
          font-size: 20px;
          font-weight: bolder;
        }

        .hi-right {
          color: #FFA01D;
          font-size: 14px;
        }

        .hi-bottom {
          font-size: 14px;
          color: #6C6C6C;
          display: block;
          background: #e9e9e8;
          border-radius: 22px;
          text-align: center;
          margin: 0 auto;
          padding: 2px;
        }
      }

      .ht-last {
        margin-left: 40px;
      }
    }
  }

}
</style>
